<template>
	<view class='page'>
		<view class='fixed-top-cont'>
			<view class="cont-block">
				<block v-for="(item,index) in itemList">
					<view class="cont-list" :data-id="index" @tap="tab" :class="currentTab == index ? 'listActive' : ''">
						<view class="newstabBar" :class="currentTab==index?'listActiveWhite':'listActiveWhite'">
							<text v-if="item.index==0">同城</text>
							<text v-if="item.index==1">二手</text>
							<text>{{item.name}}</text>
						</view>

					</view>
				</block>
			</view>
		</view>
		<!-- 商店列表的开始-->
		<view class="weui-tab" v-if="currentTab == 0">
			<view class='tcmerchant'>
			</view>
			<view class='merchant-list-shop'>
				<view class="shop-list" v-for="(item,index) in list">
					<!-- :url="'../merchant?merId='+item.id+'&userId='+item.user_id+'&type='+item.type" -->
					<navigator :url="'../merchant?merId='+item.id+'&userId='+item.user_id+'&type='+item.type" hover-class="none" class='shop-list-mess'>
						<view class='shop-list-head'>
							<image :src="item.shop_avatar"></image>
						</view>
						<view class='shop-list-cont'>
							<view class='list-cont-name'>
								<text class='list-cont-name-name'>{{item.name}}</text> <text class='list-cont-name-distance'>{{item.distance}}KM</text>
							</view>
							<view>
								<block v-for="(i,item) in item.starLevel">
									<image class="icon-star" v-if="i" src="../../../static/images/user-center/star-light.png"></image>
									<image class="icon-star" wx:else src="../../../static/images/user-center/star-dark.png"></image>
								</block>
							</view>
							<view class='list-cont-label'>
								<text v-if="item.main_category">{{item.main_category}}</text>
								<text v-if="item.sub_category">{{item.sub_category}}</text>
							</view>
							<view class='list-cont-location'>
								<!-- <image src='../../../static/images/list/host.png'></image> -->
								<image class="address-card-host" mode="scaleToFill" src="https://gy-files.oss-cn-shenzhen.aliyuncs.com/small_img/weizhi.png"></image>
								<text>{{item.address}}</text>
							</view>
						</view>
					</navigator>
					<view class='shop-btn'>
						<view class='shop-btn-list' :data-name="item.name" :data-address="item.address" :data-latitude="item.latitude"
						 :data-longitude="item.longitude" @tap='goMap'>
							<image src='../../../static/images/list/host.png'></image>
							<text>导航到家</text>
						</view>
						<view class='shop-btn-list' :data-tel="item.mobile" @tap='phonecallevent'>
							<image src='../../../static/images/tel-red.png'></image>
							<text>联系商家</text>
						</view>
						<!-- ../merchant?merId=item.id&userId=item.user_id&type=item.type -->
						<navigator :url="'../merchant?merId='+item.id+'&userId='+item.user_id+'&type='+item.type" hover-class="none"
						 class='shop-btn-list'>
							<image src='../../../static/images/right.png'></image>
							<text>进店逛逛</text>
						</navigator>
					</view>
				</view>
			</view>
		</view>



		<!-- 二手闲置 -->
		<view class="weui-tab-xz" v-if="currentTab == 1">
			<view class='fixed-top-cont-shai'>
				<view class='fixed-top-container-shai' v-if="currentTab == 1">
					<form report-submit='true' @submit='onSubmit'>
						<view class='fixed-top-shai'>
							<view class='fixed-top-left-shai dp-flex-y-center-shai'>
								<button class='fixed-cat-shai fixed-item-shai dp-flex-y-center-shai' form-type='submit' @tap='onTimeType'>
									时间排序
								</button>
								<button class='fixed-birthPlace-shai fixed-item-shai dp-flex-y-center-shai' form-type='submit' @tap='onDistanceType'>
									距离排序
								</button>
								<button class='fixed-birthPlace-shai fixed-item-shai dp-flex-y-center-shai' form-type='submit' @tap='onDistrictType'>
									{{birthPlaceName ? birthPlaceName : "地区筛选"}}
								</button>
								<button class='fixed-cat-shai fixed-item-shai dp-flex-y-center-shai' form-type='submit' @tap='onAllType'>
									全选
								</button>
							</view>

						</view>
					</form>
				</view>
			</view>
			<view class='merchant-list-shop-xz'>
				<view class="shop-list-xz" v-for="(item,index) in second_lists" wx:key="index">

					<view class='card-qz-box'>
						<navigator :url="'../../job-want/job-want?jobId='+item.id" hover-class="none" class='shop-list-xz-mess'>
							<view class='shop-list-xz-head'>
								<image :src="item.poster_img"></image>
							</view>
							<view class='shop-list-xz-cont'>
								<view class='list-cont-name-es'>
									<text class='list-cont-name-name-es'>{{item.title}}</text> <text class='list-cont-name-distance-es'>{{item.distance}}KM</text>
								</view>
								<view>
								</view>
								<view class='list-cont-money-es'>
									<text>¥ </text>
									<text>{{item.money}}</text>
								</view>
								<view class='list-cont-label-es'>
									<text v-if="item.description">{{item.description}}</text>
								</view>
								<view></view>
								<view class='list-cont-location'>
									<image class="address-card-host" mode="scaleToFill" src="https://gy-files.oss-cn-shenzhen.aliyuncs.com/small_img/weizhi.png"></image>
									<text>{{item.address}}</text>
								</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>



	</view>
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js';
	export default {
		data() {
			return {
				icoShow: false,
				starLevel: ['', '', '', '', ''],
				//控制bar的移动
				curHdIndex: '0',
				birthPlaceName:'',
				//控制bar
				//追加导航条
				itemList: [{
						name: '厂商',
						index: 0
					},
					{
						name: '闲置',
						index: 1
					},
				],
				currentTab: 0,
				list: [{
						id: '1',
						type: '0',
						name: '新南悦陶瓷 (高新建材市场)',
						distance: '10.1',
						main_category: '建材',
						sub_category: '陶瓷',
						address: '望城区高星建材批发大市场3-20栋125号',
						tel: '15200875223',
						shop_avatar: ['https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinnan_logo.jpg'],
						starLevel: ['', '', '', '', ''],
						latitude: '28.2956100000',
						longitude: '112.8342510000',
					},
					{
						id: '3',
						type: '0',
						name: '鑫波门面',
						distance: '4.5',
						main_category: '实木',
						sub_category: '地板',
						address: '长沙市望城雷锋机电市场二期1号门面',
						tel: '15802565898',
						shop_avatar: ['https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinbo_logo.jpg'],
						starLevel: ['', '', '', '', ''],
						latitude: '28.1994200000',
						longitude: '112.8406000000',
					},
					{
						id: '4',
						type: '0',
						name: '美源环腻子',
						distance: '3.0',
						main_category: '环保',
						address: '长沙市芙蓉区马王推市场3栋302',
						tel: '15399910657',
						shop_avatar: ['https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/meiyuan_logo.jpg'],
						starLevel: ['', '', '', '', ''],
						latitude: '28.1988580000',
						longitude: '113.0260130000',
					},
					{
						id: '5',
						type: '0',
						name: '圣德保陶瓷',
						distance: '1.0',
						main_category: '陶瓷',
						address: '长沙市雨花区万家丽路喜盈门范城三楼圣德保陶瓷',
						tel: '13974999499',
						shop_avatar: ['https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/shengde_logo.jpg'],
						starLevel: ['', '', '', '', ''],
						latitude: '28.1344420000',
						longitude: '113.0344650000',
					}
				],
				second_lists: [{
					// id: '1',
					// type: '0',
					// name: '新南悦陶瓷 (高新建材市场)', distance: '10.1',
					// title:'好的好的好的',
					// address: '望城区高星建材批发大市场3-20栋125号',
					// description:'我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容',
					// tel: '15200875223', poster_img: ['https://gy-files.oss-cn-shenzhen.aliyuncs.com/images/xinnan_logo.jpg'],
					// starLevel: ['', '', '', '', ''],
					// latitude: '28.2956100000',
					// longitude: '112.8342510000',
				}]
			}
		},
		methods: {
			//标签切换
			tab: function(e) {
				let id = e.currentTarget.dataset.id,
					type = 0;
				let arr = this.main_getGlobal();
				console.log(e);
				console.log('首页id' + id);
				this.currentTab = id;
				if (id == 1) {
					this.getJobWantList(2, arr.token, 0, 0, arr.type);
				}
			},
			// 获取二手闲置
			getJobWantList: function(type, token, time, district, loginType) {
				gyzjModel.prototype.getJobWantList(type, token, time, district, loginType).then(data => {
					console.log('二手闲置的值', data);
					switch (data.code) {
						case 1:
							let second_lists = this.second_lists;
							console.log('second_lists的值', second_lists);
							// 处理订单数据
							this.processData(data).then((res) => {
								console.log('res的值');
								console.log(res);
								console.log('lists的值');
								second_lists = res;
								console.log(second_lists);
								this.pageCount = data.data.page_count;
								if (second_lists.length != 0) {
									for (var i = 0; i < second_lists.length; i++) {
										second_lists[i].distance = second_lists[i].distance.slice(0, 3);
									}
								};
								this.second_lists = second_lists;
							});
							break;
						default:
							uni.showToast({
								title: data.message,
								icon: 'none'
							});
							break;
					}
				});
			},
			//时间排序
			onTimeType: function() {
				console.log('时间排序');
				let arr = this.main_getGlobal();
				if (this.native_district_id) {
					console.log('既时间又地区');
					this.getJobWantList(2, arr.token, 1, this.data.native_district_id, arr.type);
				} else {
					console.log('只有时间的排序');
					this.getJobWantList(2, arr.token, 1, 0, arr.type);
				}
			},
			//距离筛选
			onDistanceType: function () {
			    console.log('距离排序');
			    let arr = this.main_getGlobal();
			    this.getJobWantList(2,arr.token, 0, 0,arr.type);
			  },
			//全选排序
			onAllType: function() {
				console.log('时间排序');
				let arr = this.main_getGlobal();
				this.getJobWantList(2, arr.token, 0, 0, arr.type);
				this.birthPlaceName = '地区筛选';
				this.native_district_id = '';
			},
			//地区排序
			onDistrictType: function() {
				console.log('点击距离的筛选');
				let arr = this.main_getGlobal();
				uni.navigateTo({
					url: '../../city-choose/city-choose?pageType=JobListBirthTwo',
				})
				console.log('点击筛选时间');
			},
			// 筛选
			JobDistrictFilter: function() {
				let native_district_id = this.native_district_id;
				let arr = this.main_getGlobal();
				//这里type必须为1才会执行
				this.getJobWantList(2, arr.token, 0, native_district_id, arr.type);
				console.log(native_district_id);
			},
			/*其他的处理数据*/
			processData: function(data) {
				return new Promise((resolve, reject) => {
					let array = [];
					data.data.data.map((cur, index, arr) => {
						// 处理籍贯字段
						cur['birthPlace'] = '';
						if (cur['province']) cur['birthPlace'] += cur['province']['name'];
						if (cur['city']) cur['birthPlace'] += cur['city']['name'];
						if (cur['district']) cur['birthPlace'] += cur['district']['name'];
						array.push(cur);
					})
					resolve(array);
				})
			},
	
			merchantList: function(arr) {
				gyzjModel.prototype.getMerchantsList(arr['token'], arr['type']).then((res) => {
					if (res.code == 1) {
						console.log('店铺介绍');
						console.log(res);
						var lists = res.data.data;
						if (lists.length != 0) {
							for (var i = 0; i < lists.length; i++) {
								console.log('最初的位置');
								console.log(lists[i].distance);
								lists[i].distance = lists[i].distance.slice(0, 5);
								console.log('截取后的位置');
								console.log(lists[i].distance);
								console.log('开始的等级');
								console.log(lists[i].score_level);
								var starLevel = gyzjModel.prototype.convertToStarsArray(lists[i].score_level, 5);
								console.log('截取后的等级');
								console.log(starLevel);
								lists[i].starLevel = starLevel;
								this.list.push(lists[i]);
							}
						}
						console.log('结束的lists');

					}
				})
			},
			//拨打电话
			phonecallevent: function(e) {
				let mobile=e.currentTarget.dataset.tel;
				if(mobile){
					uni.makePhoneCall({
						phoneNumber: e.currentTarget.dataset.tel
					});
				}else{
					uni.showToast({
						title: '暂无电话',
						icon: "none",
					})
				}
				
			},
			//地图导航
			goMap: function(e) {
				let data = e.currentTarget.dataset;
				console.log('导航的data的值',data);
				let latitude = Number(data.latitude);
				let longitude = Number(data.longitude);
				uni.getLocation({
					type: 'gcj02',
					success: function(res) {
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							name: data.name,
							address: data.address,
						})
					}
				})
			},
		},
		onLoad: function(options) {
			var arr = this.main_getGlobal();
			this.merchantList(arr);
		},

	}
</script>

<style>
	@import url("../../../static/style/app.css");

	page {
		background-color: #fff;
	}

	.banner {
		width: 100%;
		height: 340upx;
		margin-bottom: 20upx;
	}

	.banner image {
		width: 100%;
		height: 100%;
	}

	.search {
		background-color: #ebefed;
		padding: 20upx;
		position: relative;
	}

	.search input {
		height: 60upx;
		background-color: #fff;
		padding-left: 30upx;
		text-align: center;
	}

	.searchcion {
		position: absolute;
		top: 35upx;
		left: 40%;
		transform: translateX(-50%);
	}

	.merchant-list-sort {
		display: flex;
		background-color: #fff;
		border-top: 1px solid #eee;
		border-bottom: 1px solid #eee;
	}

	.sort-list {
		width: 20%;
		height: 70upx;
		line-height: 70upx;
		text-align: center;
		border-right: 1px solid #eee;
		color: #969696;
		font-size: 28upx;
	}

	.merchant-list-shop {
		background-color: #EBEFED;
		padding-bottom: 40upx;
	}

	.shop-list {
		margin: 30upx 20upx 0;
		background-color: #f9f9f9;
		border: 1px solid #efefef;
		border-radius: 5px;
		box-shadow: 0px 5px 10px 2px #999;
	}

	.shop-list:nth-child(1) {
		margin: -1upx 20upx 0;

	}

	.shop-list-mess {
		display: flex;
		padding: 20upx;
		padding-left: 0upx;
		align-items: center;
		background-color: white;

	}

	.shop-list-cont {
		width: 65%;
	}

	.shop-list-head {
		width: 35%;
		height: 200upx;
		text-align: center;
	}

	.shop-list-head image {
		width: 200upx;
		height: 200upx;
	}

	.list-cont-name {
		display: flex;
	}

	.list-cont-name-name {
		width: 350upx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
		font-weight: 600;
		font-size: 32upx;
		margin-right: auto;
	}

	.list-cont-name-distance {
		font-size: 28upx;
		color: #a9a9a9;
		margin-left: 20upx;
	}

	.list-cont-label {
		display: flex;
		margin: 5upx 0;
	}

	.list-cont-label text {
		/* background-color: #eee; */
		/* padding-right: 10upx; */
		color: #ccc;
		font-size: 24upx;
		margin-right: 10upx;

	}

	.list-cont-label text:nth-child(2) {
		padding-left: 10upx;
		border-left: 1px solid #ccc;
	}

	.list-cont-location {
		display: flex;
		align-items: center;
		margin: 10upx 0;
		color: #666;
		font-size: 24upx;
	}

	.list-cont-location image {
		width: 27upx;
		height: 36upx;
		margin-right: 10upx;
	}

	.list-cont-location text {
		margin-top: 10upx;
	}

	.shop-btn {
		display: flex;
		background-color: #ddd;
		border-top: 1px dotted #ccc;
	}

	.shop-btn-list {
		width: 33.3%;
		height: 80upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		font-weight: 600;
		border-right: 1px dotted #ccc;
	}

	.shop-btn-list:nth-child(3) {
		border-right: none;
	}

	.shop-btn-list image {
		width: 40upx;
		height: 40upx;
		margin-right: 10upx;
	}

	.curHdActive {
		color: #f94c48;
		font-size: 28upx;
	}

	/*新增加的二手闲置导航条*/
	.cont-block {
		display: flex;
		height: 10vh;
		border-bottom: 1px solid #e5e5e5;
	}

	.fixed-top-cont {
		width: 100%;
		background-color: #ebefed;
		display: flex;
		flex-direction: column;
		/* max-height: 20vh;
	  min-height: 12vh; */
		height: 10vh;
		overflow: hidden;
	}

	.cont-list {
		width: 50%;
		/* width: 100%; */
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1px solid #e5e5e5;
		font-size: 36upx;
		background-color: #ffffcc;
	}

	.cont-list:nth-child(3) {
		border-right: none;
	}

	.cont-list image {
		width: 20upx;
		height: 15upx;
		margin-left: 10upx
	}

	.cont-list text:nth-child(1) {
		display: block;
		width: 153upx;
		height: 30upx;
		margin-bottom: 10upx;
	}

	/*如果是最后一个样式存在冲突*/
	/* .cont-list:nth-child(4) text:nth-child(1){
	  line-height:100upx;
	} */
	.cont-list .newstabBar {
		text-align: center;
		height: 90upx;
		/* margin-top:-10upx; */
	}

	/* .cont-list:nth-child(1) .newstabBar{
	  border-bottom: 8upx solid white;
	} */
	.cont-list text:nth-child(2) {
		display: block;
		width: 153upx;
		height: 30upx;
	}

	.listActive {
		background-color: #f94c48;
		color: #fff;
	}

	.listActiveWhite {
		border-bottom: 5upx solid white;
	}

	.cont-list .newstabBar {
		text-align: center;
		height: 90upx;
		/* margin-top:-10upx; */
	}

	.list-cont-label-es {
		display: flex;
		margin: 5upx 0;
	}

	.list-cont-label-es text {
		/* background-color: #eee; */
		/* padding-right: 10upx; */
		color: #ccc;
		font-size: 24upx;
		margin-right: 10upx;
		/* height:150upx; */
		/* overflow: hidden;
	  text-overflow: ellipsis; */
		/* white-space: nowrap; */
	}

	.list-cont-label-es text:nth-child(2) {
		padding-left: 10upx;
		border-left: 1px solid #ccc;
	}

	.list-cont-name-es {
		display: flex;
	}

	.list-cont-name-name-es {
		width: 350upx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/*超出部分文字以...显示*/
		font-weight: 600;
		font-size: 32upx;
		margin-right: auto;
	}

	.list-cont-name-distance-es {
		font-size: 28upx;
		color: #a9a9a9;
		margin-left: 20upx;
	}

	.list-cont-money-es {
		font-size: 32upx;
		color: #f94c48;

	}

	.list-cont-money-es text:nth-child(1) {
		font-size: 20upx;
		margin-right: 6upx;
	}

	.list-cont-money-es text:nth-child(2) {
		font-size: 28upx;
	}

	/*闲置背景的修改*/
	.weui-tab-xz {
		position: relative;
		height: 100%;
		/* border-top: 5upx solid white; */
		border-top: 1upx solid white;
		background-color: #EBEFED;
	}

	.shop-list-xz {
		margin: 30upx 20upx 0;
		/* background-color: black; */
		background-color: white;
		border: 1px solid #efefef;
		border-radius: 5px;
		box-shadow: 0px 5px 10px 2px #999;
	}

	.shop-list-xz-mess {
		display: flex;
		padding: 20upx;
		padding-left: 0upx;
		align-items: center;
		margin: 20upx;

	}

	.shop-list-xz-cont {
		width: 65%;
	}

	.shop-list-xz-head {
		width: 35%;
		height: 200upx;
		text-align: center;
	}

	.shop-list-xz-head image {
		width: 200upx;
		height: 200upx;
	}

	.merchant-list-shop-xz {
		background-color: #EBEFED;
		padding-bottom: 40upx;
	}

	/*同城厂商*/
	.tcmerchant {
		height: 30upx;
		background-color: #EBEFED;
		/* border-top:5upx solid white; */
	}

	/*同城二手闲置的筛选开始*/
	.fixed-top-cont-shai {
		width: 100%;
		background-color: white;
		display: flex;
		flex-direction: column;
		max-height: 20vh;
		min-height: 12vh;
		overflow: hidden;
	}

	.fixed-top-container-shai {
		width: 100%;
		background-color: #fff;
		height: 9vh;
		font-size: 14px;
	}

	.fixed-top-shai {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		height: 100%;
		align-items: center;
		/* border: 1px solid #e5e5e5; */
	}

	.fixed-top-left-shai {
		display: flex;
		margin-left: 20upx;
	}

	.fixed-cat-shai,
	.fixed-birthPlace-shai {
		border: 1px solid #666;
		/* color: #F94C48; */
		border-radius: 5px;
		margin-right: 20upx;
	}

	.fixed-item-shai {
		padding: 0upx 6upx;
		height: 68upx;
		margin-top: 16px;
		line-height: 68upx;
		font-size: 17px;
	}

	/*同城二手闲置的筛选结束*/
	/* 追加卡片效果开始*/
	.card-qz-box {
		width: 94%;
		/* height:100%;
	  background: black; */
		border-radius: 10upx;
		margin: 0 3%;
		background: white
	}
</style>
